import React, { useEffect, useState } from 'react'
import {getProList} from '../../api/pro'
import {Table, Button} from 'antd'

// cnpm i js-export-excel
import ExportJsonExcel from 'js-export-excel'


const Export = () => {

  // 所有的数据
  const [proList,setProList] = useState()
  
  useEffect(()=>{
    getProList().then(res => {
      // console.log(res.data);
      setProList(res.data)
    })
  }, [])

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    }, {
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]

  // 文件导出
  // 文件导出通常有两种方法
  // 1. 将文件直接在后端进行生成，然后给前端一个文件地址，前端使用 a 标签的 href 属性进行下载即可
  // 2. 前端将内容处理后直接生成文件，然后将文件保存在本地即可
  function exportClick(){
    const option = {
      fileName: '商品信息', // 导出的文件名称
      datas: [
        {
          sheetData: proList, // 要导出的原数据
          sheetName: '你好世界', // 导出后工作表的名称
          sheetFilter: ['proname', 'proid', 'brand', 'category'], // 需要导出原数据中的哪些字段
          sheetHeader: ['商品名称', '商品 id', '品牌', '分类'], // 导出文件后，表头名称
          columnWidths: [], // 导出后单元格的宽度
        }, {
          sheetData: proList, // 要导出的原数据
          sheetName: '你好中国', // 导出后工作表的名称
          sheetFilter: ['img1','originprice', 'desc'], // 需要导出原数据中的哪些字段
          sheetHeader: ['商品logo', '商品价格', '介绍'], // 导出文件后，表头名称
          columnWidths: [10,20,30], // 导出后单元格的宽度
        }
      ]
    }

    // 将配置对象，配置成 excel 表格文件
    const toExcel = new ExportJsonExcel(option)
    // 将表格文件保存在本地
    toExcel.saveExcel()

  }
  return (
    <div>
      <h1>文件导出 <Button onClick={exportClick}>导出</Button></h1>

      <Table dataSource={proList} rowKey={'proid'} scroll={{y: 450}} columns={columns} />

    </div>
  )
}

export default Export